import * as React from 'react';
import '../styles.less';
import ParagraphCard from '../../../components/ParagraphCard'
import { insertHtmlAfterParagraph } from '../../../utils/WordUtil'
import * as ReactDom from 'react-dom';

export interface InfoBoxProps {
  res: any[]
}

export interface InfoBoxStates {

}

export default class Assistant extends React.Component<InfoBoxProps, InfoBoxStates> {
  constructor(props, context) {
    super(props, context);
  }

  render() {
    const { content }: any = this.props.res
    let item = content ? content.self : ''
    console.log('item:', item)
    return (
      <div className='infobox'>
        {/* <div className='infobox' ref={(ref) => { this.lostCardButtonGrop = ref }}> */}
        {
          content && <ParagraphCard
            key={item.id}
            title={item.name}
            menuProps={
              {
                items: [
                  {
                    key: 'download',
                    text: '插入到word',
                    iconProps: {
                      iconName: 'Download',
                    },
                    onClick: () => {
                      const str = ReactDom.findDOMNode(this.refs.infobox) as any
                      insertHtmlAfterParagraph(str.innerHTML)
                      return;
                    }
                  }
                ]
              }
            }
          >
            <div className="pros-wrap" ref='infobox'>
              <div className="title" style={{color: 'rgb(0, 120, 212)'}}>{item.name}</div>
              {
                item.extra && item.extra.length > 0 && item.extra.map((item, index) => {
                  if (item.v) {
                    return <div className="pro-li" key={index} style={{ display: 'flex', fontSize: '14px', lineHeight: '22px' }}>
                      <span className="label" style={{
                        width: '80px',
                        flex: '0 0 auto',
                        color: '#999'
                      }}>{item.k}<span className="hide-text">:</span></span>
                      <span className="value" style={{ color: '#333' }}>{item.v}</span>
                    </div>
                  }
                  return
                })
              }
            </div>
          </ParagraphCard>
        }
      </div>
    );
  }

}
